<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width, no-referrer">
  <link rel="icon" type="image/png" href="https://www.xuhxin.cn/file/%E6%A1%83%E5%BF%83.png">
  <title>爱情足迹</title>
  <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
  <link rel="stylesheet" type="text/css"
        href="//a.amap.com/amap-ui/static/1.0/ui/misc/MarkerList/examples/pagination.css">
  <script type="text/javascript" src="https://www.xuhxin.cn/file/Personal-home-page/assets/js/shubiao.js"></script>

  <style>
    html,
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      padding: 0;
      background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
    }

    #container {
      height: 100%;
      width: 100%;
      position: relative;
      display: block;
      margin: auto;
    }

    .amap-icon img,
    .amap-marker-content img {
      width: 25px;
      height: 34px;
    }

    .marker {
      position: absolute;
      top: -20px;
      right: -118px;
      color: #fff;
      padding: 4px 10px;
      box-shadow: 1px 1px 1px rgba(10, 10, 10, .2);
      white-space: nowrap;
      font-size: 12px;
      font-family: "";
      background-color: #25A5F7;
      border-radius: 3px;
    }



    .input-card {
      position: absolute;
      bottom: 30px;
      right: 30px;
      width: 34px;
      height: 34px;
      text-align: center;
      line-height: 34px;
      padding: 10px;
      z-index: 170;
    }
    .inputCard{
      position: absolute;
      top: 50vh;
      right: 0.1rem;
      margin-right: 0.5rem;
      z-index: 170;
      font-size: 1rem;
    }
    .color1{
      background-color: #ff0000;
    }
    .color2{
      background-color: #00ffff;
    }
    .color{
      background-color: #ff9a9e;
    }
    .span1{
      width: 3rem;
      height: 0.3rem;
      display: inline-block;
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="input-card" onclick="black()"><svg t="1733192463809" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10148" width="15" height="15"><path d="M1024 438.857143L512 0 0 438.857143h82.651429v512a73.142857 73.142857 0 0 0 73.142857 73.142857h219.428571V585.142857h292.571429v438.857143h219.428571a73.142857 73.142857 0 0 0 73.142857-73.142857V438.857143z" p-id="10149" fill="#2c2c2c"></path></svg></div>
    <div class="inputCard" style="width: auto;">
      <div>
        <span class="color1 span1"></span>小郑
      </div>
      <div>
        <span class="color2 span1"></span>小许
      </div>
      <div>
        <span class="color span1"></span>一起
      </div>
    </div>
  </div>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=7aa644dd47dd622ba0cfb0f80b6912fe"></script>
  <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
  <script type="text/javascript">
    var marker, map = new AMap.Map("container", {
      resizeEnable: true,
      center: [115.78,33.85],
      zoom: 7,
      viewMode: "2D", //设置地图模式
    });
    var list = []
    let listjson = []
    let path1 = {
                initRotateDegree: 0,
                width: 16,
                height: 16,
                autoRotate: true,
                lineJoin: 'round',
                content: 'defaultPathNavigator',
                fillStyle: '#ff0000',
                strokeStyle: '#ff0000', //'#eeeeee',
                lineWidth: 1,
                pathLinePassedStyle: {
                    lineWidth: 2,
                    strokeStyle: '#ff0000',
                    borderWidth: 1,
                    borderStyle: '#eeeeee',
                    dirArrowStyle: false
                }
            }
    let path2 =  {
                initRotateDegree: 0,
                width: 16,
                height: 16,
                autoRotate: true,
                lineJoin: 'round',
                content: 'defaultPathNavigator',
                fillStyle: '#00ffff',
                strokeStyle: '#00ffff', //'#eeeeee',
                lineWidth: 1,
                pathLinePassedStyle: {
                    lineWidth: 2,
                    strokeStyle: '#00ffff',
                    borderWidth: 1,
                    borderStyle: '#eeeeee',
                    dirArrowStyle: false
                }
            }
    let path =  {
                initRotateDegree: 0,
                width: 16,
                height: 16,
                autoRotate: true,
                lineJoin: 'round',
                content: 'defaultPathNavigator',
                fillStyle: '#ff9a9e',
                strokeStyle: '#ff9a9e', //'#eeeeee',
                lineWidth: 1,
                pathLinePassedStyle: {
                    lineWidth: 2,
                    strokeStyle: '#ff9a9e',
                    borderWidth: 1,
                    borderStyle: '#eeeeee',
                    dirArrowStyle: false
                }
            }
    // fetch('./index.json', {
    //   method: 'GET',
    //   headers: {
    //     'Content-Type': 'application/json'
    //   }
    // })
    //   .then(response => {
    //     if (response.ok) {
    //       return response.json(); // 将响应数据转换为JSON
    //     }
    //     throw new Error('Network response was not ok.');
    //   })
    //   .then(jsonData => {
    //     list = jsonData.list
    //     for (let i = 0; i < jsonData.list.length; i++) {
    //       const item = jsonData.list[i].value;
    //       listjson.push(item)
    //     }
    //     addMarker()
    //   })
    //   .catch(error => {
    //     console.error('There has been a problem with your fetch operation:', error);
    //   });

    function black() {
      window.location.href = "https://www.xuhxin.cn/file/Personal-home-page/index.html";
    }

    AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {

//添加一个缩放控件
map.addControl(new BasicControl.Zoom({
    position: 'lt'
}));

//缩放控件，显示Zoom值
map.addControl(new BasicControl.Zoom({
    position: 'lb',
    showZoomNum: true
}));

//图层切换控件
map.addControl(new BasicControl.LayerSwitcher({
    position: 'rt'
}));
});

    AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {

if (!PathSimplifier.supportCanvas) {
    alert('当前环境不支持 Canvas！');
    return;
}

var pathSimplifierIns = new PathSimplifier({
    zIndex: 100,
    autoSetFitView:false,
    map: map, //所属的地图实例

    getPath: function(pathData, pathIndex) {
        return pathData.path;
    },
    getHoverTitle: function(pathData, pathIndex, pointIndex) {
        return pathData.name;
    },
    renderOptions: {
      renderAllPointsIfNumberBelow:100,
        pathLineStyle: {
            dirArrowStyle: true
        },
        getPathStyle: function(pathItem, zoom) {
          
            var color = pathItem.pathData.colors,
                lineWidth = Math.round(2 * Math.pow(1.1, zoom));

            return {
                pathLineStyle: {
                    strokeStyle: color,
                    lineWidth: lineWidth
                },
                pathLineSelectedStyle: {
                    lineWidth: lineWidth + 1
                },
                pathNavigatorStyle: {
                    fillStyle: color
                }
            };
        }
    }
});

window.pathSimplifierIns = pathSimplifierIns

$.getJSON('./path.json', function(d) {

    // $('#loadingTip').remove();

    // var flyRoutes = [];

    // for (var i = 0, len = d.length; i < len; i++) {

    //     if (d[i].name.indexOf('乌鲁木齐') >= 0) {

    //         d.splice(i, 0, {
    //             name: '飞行 - ' + d[i].name,
    //             path: PathSimplifier.getGeodesicPath(
    //                 d[i].path[0], d[i].path[d[i].path.length - 1], 100)
    //         });

    //         i++;
    //         len++;
    //     }
    // }

    // d.push.apply(d, flyRoutes);

    pathSimplifierIns.setData(d);

    //initRoutesContainer(d);

    function onload() {
        pathSimplifierIns.renderLater();
    }

    function onerror(e) {
        alert('图片加载失败！');
    }

    for (let i = 0; i < d.length; i++) {
      let item = d[i]
      var navg = pathSimplifierIns.createPathNavigator(i, {
        loop: true, //循环播放
        speed: item.speed,
        pathNavigatorStyle: item.type==0?path:item.type==1?path2:path1
    });
    navg.start();
    }
});
});

  </script>
  <img class="mouse" src="https://www.xuhxin.cn/file/Personal-home-page/123.png" alt="">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      cursor: none;
    }

    .mouse {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      ;
      position: fixed;
      left: -200px;
      z-index: 1000;
      pointer-events: none;
    }
  </style>
  <script>
      var mouse = document.querySelector('.mouse');
      window.addEventListener('mousemove', function (event) {
        mouse.style.left = event.clientX - mouse.offsetWidth / 2 + 'px';
        mouse.style.top = event.clientY - mouse.offsetHeight / 2 + 'px';
      })
  </script>
</body>

</html>